<%if (css === 'less') {-%>

  @flex-direction: row, column;
  @flex-size: 5;
  
  @flex-start: start, flex-start;
  @flex-center: center, center;
  @flex-end: end, flex-end;
  @flex-space-between: between, space-between;
  @flex-space-around: around, space-around;
  @align-items: @flex-start, @flex-center, @flex-end, @flex-space-between, @flex-space-around;
  @justify-content: @flex-start, @flex-center, @flex-end, @flex-space-between, @flex-space-around;
  
  .flex(@n) when (@n > 0) {
    @direction-name: extract(@flex-direction, @n);
    .flex-@{direction-name} {
      display: flex;
      flex-direction: @direction-name;
    }
  
    .flex(@n - 1);
  }
  
  .flex(length(@flex-direction));
  
  .flex-size(@i) when (@i > 0) {
    .flex-@{i} {
      flex: @i;
    }
  
    .flex-size(@i - 1);
  }
  
  .flex-size(@flex-size);
  
  .align-items(@i) when (@i > 0) {
    @item: extract(@align-items, @i);
    @item-name: extract(@item, 1);
    @item-value: extract(@item, 2);
  
    .align-items-@{item-name} {
      align-items: @item-value;
    }
  
    .align-items(@i - 1);
  }
  
  .align-items(length(@align-items));
  
  .justify-content(@i) when (@i > 0) {
    @item: extract(@justify-content, @i);
    @item-name: extract(@item, 1);
    @item-value: extract(@item, 2);
  
    .justify-content-@{item-name} {
      justify-content: @item-value;
    }
  
    .justify-content(@i - 1);
  }
  
  .justify-content(length(@justify-content));
  
<%} else if (css === 'scss') { -%>
  $flex-direction: (row, column);
  $flex-size: 5;
  
  $flex-type: (start: flex-start, center: center, end: flex-end, between: space-between, around: space-around);
  
  
  @each $dirction in $flex-direction {
    .flex-#{$dirction} {
      display: flex;
      flex-direction: $dirction;
    }
  }
  
  @for $size from 1 to $flex-size {
    .flex-#{$size} {
      flex: $size;
    }
  }
  
  @each $type, $value in $flex-type {
    .align-items-#{$type} {
      align-items: $value;
    }
  
    .justify-content-#{$type} {
      justify-content: $value;
    }
  }
  
<%}-%>
